<template lang="pug">
div(class="aw-emoji-menu")
    table(class="emoji-menu-tabs")
        tr
            td(v-for="menu in menus" :key="menu.name")
                a(:class="'emoji-menu-tab icon-'+menu.name+ (menuActived == menu.name? '-selected' : '')" 
                  @click="emojiTab(menu)")
</template>
<script>
export default {
  name: "emoji-menus",
  data() {
    return {
      menuActived: "" // 选中的
    };
  },
  props: {
    menus: { type: Array }
  },
  methods: {
    emojiTab(menu) {
      this.menuActived = menu.name;
      this.$emit("tab", menu);
    }
  },
  created() {
    this.menuActived = this.menus[0].name;
  }
};
</script>

<style lang="less" scoped>
.aw-emoji-menu {
  .emoji-menu-tabs {
    width: 100%;
    margin-bottom: 4PX;
    margin-top: 4PX;
    background-color: #eaeaea;
    td {
      text-align: center;
      color: white;
      line-height: 0;
    }

    .emoji-menu-tab {
      display: inline-block;
      width: 24PX;
      height: 29PX;
      background: url("./img/IconsetSmiles.png") no-repeat;
      background-size: 42PX 350PX;
      border: 0;
      //--
    }
    .icon-recent {
      background-position: -9PX -306PX;
    }
    .icon-recent-selected {
      background-position: -9PX -277PX;
    }

    .icon-smile {
      background-position: -9PX -34PX;
    }
    .icon-smile-selected {
      background-position: -9PX -5PX;
    }

    .icon-flower {
      background-position: -9PX -145PX;
    }
    .icon-flower-selected {
      background-position: -9PX -118PX;
    }

    .icon-bell {
      background-position: -9PX -89PX;
    }
    .icon-bell-selected {
      background-position: -9PX -61PX;
    }

    .icon-car {
      background-position: -9PX -196PX;
    }
    .icon-car-selected {
      background-position: -9PX -170PX;
    }

    .icon-grid {
      background-position: -9PX -248PX;
    }
    .icon-grid-selected {
      background-position: -9PX -222PX;
    }

    .icon-smile,
    .icon-flower,
    .icon-bell,
    .icon-car,
    .icon-grid {
      opacity: 0.7;
    }

    .icon-smile:hover,
    .icon-flower:hover,
    .icon-bell:hover,
    .icon-car:hover,
    .icon-grid:hover {
      opacity: 1;
    }
  }
}
</style>
